<%@ page import="com.jplayground.tree.TreeBuilder" %>
<%@ page import="com.jplayground.tree.TreeNodeVO" %>
<%--
  User: Natalia Batishcheva
  Project: Calabria
  Date: 04.01.2008
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="jp" uri="http://code.google.com/p/jplayground/" %>
<html>
<head>
    <title>Sample Tree</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery.treeview/jquery.treeview.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery.treeview/red-treeview.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/common.css"/>

    <script src="${pageContext.request.contextPath}/js/jquery.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.cookie.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.treeview.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/tree-context-menu.js" type="text/javascript"></script>

    <script src="${pageContext.request.contextPath}/js/jquery.contextmenu.js" type="text/javascript"></script>

    <script src="${pageContext.request.contextPath}/js/jquery.ui/ui.mouse.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.ui/ui.dimensions.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.ui/ui.draggable.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/jquery.ui/ui.draggable.ext.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            var contextMenu = {
                bindings : {
                    'create': function(t) {
                        var branches = $("<li class='closed'><span class='folder' id='new 2'>New Sublist</span><ul><li><span class='file'>Item1</span></li><li><span class='file'>Item2</span></li></ul></li>")
                                .prependTo($(t).parent().find(">ul"));

                        $("#browser").treeview({
                            add: branches
                        });
                    },

                    'delete': function(t) {
                        alert('Trigger was ' + t.id + '\nAction was Delete');
                    }
                }
            };

            $("#browser").treeview(
                {
                    contextMenu : contextMenu,
                    onFolderClick : function(id) { /*alert("Folder " + id) */},
                    onItemClick : function(id) { /*alert("Item " + id)*/ }
                }
            );

        });
    </script>
</head>

<%
    TreeNodeVO tree = (new TreeBuilder()).build();
%>

<body>
<div class="treeWrapper">
    <jp:tree tree="<%=tree%>" styleId="browser" />
</div>

<div class="contextMenu" id="myMenu1">
    <ul>
        <li id="create">Create</li>
        <li id="delete">Delete</li>
    </ul>
</div>
</body>
</html>